<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools :node-data="companyInfo" :is-company="false" @showAddDialog="showAddDialog" />
        <!-- 分割线 -->
        <el-divider />
        <!-- 树形部分 -->
        <el-tree :data="depts" default-expand-all>
          <template v-slot="scope">
            <tree-tools :node-data="scope.data" :is-company="true" @showAddDialog="showAddDialog" @showEditDialog="showEditDialog" @delDepartment="delDepartment" />
          </template>
        </el-tree>
      </el-card>
      <add-dept
        ref="addDept"
        :node-data="nodeData"
        :is-show-dialog="isShowDialog"
        @closeDialog="onCloseDialog"
        @reload="onReload"
      />
    </div>
  </div>
</template>

<script>
import treeTools from '@/views/departments/components/treeTools.vue'
import { getDepartmentAPI, delDepartmentAPI } from '@/api/departments'
import { listToTree } from '@/utils'
import AddDept from './components/addDepts.vue'
import { Message } from 'element-ui'
export default {
  components: { treeTools, AddDept },
  data() {
    return {
      companyInfo: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人'
      },
      depts: [], // treeData
      isShowDialog: false, // 显示窗体
      nodeData: {}
    }
  },
  created() {
    this.onReload()
  },
  methods: {
    showAddDialog(nodeData) {
      console.log(nodeData)
      this.isShowDialog = true // 显示弹层
      this.nodeData = nodeData
    },
    async showEditDialog(nodeData) {
      await this.$refs.addDept.getDepart(nodeData.id)
      this.isShowDialog = true // 显示弹层
    },
    onCloseDialog() {
      this.isShowDialog = false
    },
    async onReload() {
      const res = await getDepartmentAPI()
      // console.log(res)
      this.depts = listToTree(res.depts, '')
    },
    async delDepartment(nodeData) {
      await this.$confirm('是否继续进行删除操作')
      await delDepartmentAPI(nodeData.id)
      Message.success('删除成功')
      this.onReload()
    }
  }
}
</script>

  <style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
  </style>
